﻿<link href="/screens/billing/billing.css" rel="stylesheet" media="screen"/>
<link href="/screens/billing/billing.css" rel="stylesheet" media="print" />

<div class="row">
    <div class="col-md-5" style="margin:5px 0 0 0;">
        <div class="form-inline form-inputs-200">
            <div class="form-group">
                <label class="control-label" for="productTbx">Producto:</label>
                <input type="text" id="productTbx" name="product" class="form-control" placeholder="Producto" autofocus />
            </div>
            <div class="form-group" style="margin: 0 0 0 5px;">
                <label class="control-label" for="productCountTxb">Cantidad:</label>
                <input type="number" name="productCount" class="form-control" style="width:60px;" placeholder="####" />
            </div>
            <button id="addProductBtn" class="btn btn-primary" style="margin-left:5px;font-weight:bold;">Agregar</button>
        </div>
        <div id="billingItems" class="col-md-12" style="margin:20px 0 0 0;height:525px;overflow-y:auto;"></div>
    </div>
    <div class="col-md-7">
        <div class="col-md-5 form-horizontal" style="margin-bottom:0;padding:10px 0 0 10px;width:34%;min-width:230px;">
            <div class="form-group">
                <label class="control-label" for="customerTbx" style="font-size:20px">Cliente:</label>
                <input type="text" id="customerTbx" name="customer" class="form-control" style="width:230px;" placeholder="Cliente" />
            </div>
            <div class="form-group">
                <label class="control-label" for="payTbx" style="font-size:20px">Pago:</label>
                <input type="number" id="payTbx" name="pay" class="form-control" style="width:230px;" placeholder="Pago" />
            </div>
            <div class="form-group" style="font-size:30px">
                <label class="control-label">Total:</label>
                <span class="form-control-static" id="totalPrice" name="totalPrice"></span>
            </div>
        </div>
        <div class="col-md-7" style="margin:5px 0 0 0;width:65%;">
            <div class="form-inline" style="margin:0 0 0 10px;">
                <div class="form-group" style="margin:0 0 10px 5px;">
                    <button id="billBtn" class="btn btn-success" style="width:140px;">
                        <i class="fa fa-money" style="width:100%;text-align:center;font-size:80px;"></i>
                        <span style="float:left;width:100%;font-size:30px;">Facturar</span>
                    </button>
                </div>
                <div class="form-group" style="margin:0 0 10px 5px;">
                    <button id="newBtn" class="btn btn-success" style="width:140px;">
                        <i class="fa fa-file-o" style="width:100%;text-align:center;font-size:80px;"></i>
                        <span style="float:left;width:100%;font-size:30px;">Nueva</span>
                    </button>
                </div>
                <div class="form-group" style="margin:0 0 10px 5px;">
                    <button id="printBtn" class="btn btn-info" style="width:140px;">
                        <i class="fa fa-print" style="width:100%;text-align:center;font-size:80px;"></i>
                        <span style="float:left;width:100%;font-size:30px;">Imprimir</span>
                    </button>
                </div>
                <div class="form-group" style="margin:0 0 10px 5px;">
                    <button id="cleanBtn" class="btn btn-danger" style="width:140px;">
                        <i class="fa fa-trash-o" style="width:100%;text-align:center;font-size:80px;"></i>
                        <span style="float:left;width:100%;font-size:30px;">Limpiar</span>
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-7">
        <div class="container-fluid">
            <h3 class="pull-left no-margin">Últimas Facturas</h3>
            <div class="pull-left">
                <a style="position:absolute;bottom:0;height:auto;display:none;">Ver todas</a>
            </div>
            
        </div>
        <div id="billingHistory" class="row" style="margin:3px 0 0 0;padding:0;"></div>
    </div>
</div>